<template>
	<view class="container">
		<u-navbar backIconColor="#333" :title="inits.title" :is-back="true" :background="{}" class="bg"
			:borderBottom="false"></u-navbar>

		<!-- 酒店信息 -->
		<view style="background: #fff; padding: 42rpx 35rpx 22rpx 35rpx">
			<view class="font-30">
				<view @click="jump(`/pages/common/calendarSelection?min=${inits.info.min_day}`)">
					{{ inits.calendarData.start.month }}月{{ inits.calendarData.start.day }}日
					{{ inits.calendarData.start.weekText }}
					<text style="margin: 0 20rpx">{{ inits.calendarData.diff }}晚</text>
					{{ inits.calendarData.end.month }}月{{ inits.calendarData.end.day }}日
					{{ inits.calendarData.end.weekText }}
				</view>
				<view class="mt-10" v-if="inits.info.package">{{ inits.info.r_name }}</view>
			</view>
			<u-line margin="42rpx 30rpx 22rpx 30rpx" />
			<!-- 政策条款 -->
			<view class="font-22">
				<view @click="inits.mask = true">
					<u-icon name="info-circle" size="24" class="mr-5"></u-icon>
					入住及取消政策
				</view>
				<view class="font-lighter mt-15">· 支付后1小时内可免费取消，超过1小时不可取消</view>
			</view>
		</view>

		<!-- 住客信息 -->
		<view class="flex flex-jc-sb tag">
			<view class="tag-1" @click="formData.reserve_type = 0"
				:class="[formData.reserve_type === 0 ? 'tag-active' : 'tag-in']">本人入住</view>
			<view class="tag-2" @click="formData.reserve_type = 1"
				:class="[formData.reserve_type === 1 ? 'tag-active-2' : 'tag-in']">帮人预定</view>
		</view>
		<!-- 房间数 -->
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">房间数</view>
			<view class="flex flex-ai-c f1 flex-jc-sb" @click="inits.setRoom = true">
				<view>{{ formData.reserve_room_num }}间</view>
				<u-icon name="arrow-right" size="20rpx" color="#666666" />
			</view>
		</view>
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">入住人数</view>
			<view class="flex flex-ai-c f1 flex-jc-sb">
				<view>{{ formData.reserve_room_num }}</view>
			</view>
		</view>
		<!-- 住客姓名 -->
		<view style="background: #d8d8d8; margin: 0 30rpx; height: 1rpx"></view>
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">住客姓名</view>
			<view class="flex flex-ai-c f1">
				<u-input v-model="formData.reserve_name" inputAlign="left" :border="false"
					placeholder="请填写住客姓名"></u-input>
			</view>
		</view>
		<view style="background: #d8d8d8; margin: 0 30rpx; height: 1rpx"></view>
		<!-- 联系电话 -->
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">联系电话</view>
			<view class="flex flex-ai-c f1">
				<u-input :customStyle="{ color: '#000' }" v-model="formData.reserve_phone" inputAlign="left"
					:border="false" placeholder="请输入联系方式"></u-input>
				<button @getphonenumber="getPhoneNumber" open-type="getPhoneNumber" type="primary" formType="submit"
					v-if="formData.reserve_type === 0">
					<view class="flex flex-ai-c flex-jc-c" style="color: #333333">一键授权手机号</view>
				</button>
			</view>
		</view>
		<view style="background: #d8d8d8; margin: 0 30rpx; height: 1rpx"></view>
		<!-- 预计到店 -->
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">预计到店</view>
			<view class="flex flex-ai-c f1 flex-jc-sb" @click="inits.setDate = true">
				<view>{{ formData.arrival_time }}</view>
				<u-icon name="arrow-right" size="20rpx" color="#666666" />
			</view>
		</view>
		<view style="background: #d8d8d8; margin: 0 30rpx; height: 1rpx"></view>
		<!-- 人数 -->
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">增加人数</view>
			<view class="flex flex-ai-c f1 flex-jc-sb" @click="inits.setNum = true">
				<view>{{ formData.reserve_p_num }}人</view>
				<u-icon name="arrow-right" size="20rpx" color="#666666" />
			</view>
		</view>
		<view style="background: #d8d8d8; margin: 0 30rpx; height: 1rpx"></view>
		<!-- 备注 -->
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">备注</view>
			<view class="flex flex-ai-c f1">
				<u-input v-model="formData.remark" inputAlign="left" :border="false"
					placeholder="请填写您的备注（选填）"></u-input>
			</view>
		</view>
		<view style="padding: 46rpx 21rpx; color: #999999" class="font-24">
			温馨提示：基地预订服务由知年喜舍运营者知年喜舍健康科技 有限公司提供，具体住宿服务由各基地门店提供。
		</view>
		<!-- 底部操作栏 -->
		<view class="footer">
			<view class="footer-modal" :class="[inits.isMore ? 'modal-up' : '']">
				<view class="u-text-center">
					<view style="padding: 30rpx 0 60rpx 0" class="font-32">费用明细</view>
					<view style="position: absolute; right: 30rpx; top: 30rpx" @click="inits.isMore = false">
						<u-icon name="close" size="30rpx" color="#999999" />
					</view>
				</view>
				<view class="flex flex-jc-sb flex-ai-c">
					<view class="font-36">在线支付</view>
					<view v-if="inits.info.package">
						<text class="font-24">{{ inits.calendarData.diff }}晚，{{ formData.reserve_room_num }}间 共</text>
						<text class="font-22" style="color: #fe2600">￥</text>
						<text style="color: #fe2600" class="font-48">{{ totlaPrice(inits.info.package) }}</text>
					</view>
				</view>
				<view style="line-height: 50rpx">
					<view class="flex flex-jc-sb flex-ai-c">
						<view>{{ inits.info.room_money_text }}</view>
						<view v-if="inits.info.package">{{ inits.calendarData.diff }} x {{ formData.reserve_room_num }} x {{ inits.info.total_price }}
						</view>
					</view>
					<view class="flex flex-jc-sb flex-ai-c"
						v-if="inits.info.package && Number(inits.info.package.caregiver_money)">
						<view>{{ inits.info.caregiver_money_text }}</view>
						<view>
							{{ inits.calendarData.diff }} x
							{{ inits.info.package.caregiver_money }}
						</view>
					</view>
					<!-- 人数 -->
					<view class="flex flex-jc-sb flex-ai-c"
						v-if="inits.info.package && Number(inits.info.package.reserve_p_money) && formData.reserve_p_num">
						<view>{{ inits.info.reserve_p_money_text }}</view>
						<view>
							{{ inits.calendarData.diff }} x {{ formData.reserve_p_num }} x
							{{ inits.info.package.reserve_p_money }}
						</view>
					</view>
					<view class="flex flex-jc-sb flex-ai-c"
						v-if="inits.info.package && Number(inits.info.package.breakfast_money)">
						<view>{{ inits.info.breakfast_money_text }}</view>
						<view>
							{{ inits.calendarData.diff }} x
							{{ inits.info.package.breakfast_money }}
						</view>
					</view>
					<view class="flex flex-jc-sb flex-ai-c"
						v-if="inits.info.package && Number(inits.info.package.other_money)">
						<view>{{ inits.info.other_money_text }}</view>
						<view>
							{{ inits.calendarData.diff }} x
							{{ inits.info.package.other_money }}
						</view>
					</view>
				</view>
			</view>
			<view class="price flex flex-ai-c flex-jc-sb">
				<view class="font-28" v-if="inits.info.package">
					订单金额
					<text class="amount">
						<text class="font-22">￥</text>
						<text class="font-48">{{ totlaPrice(inits.info.package) }}</text>
					</text>
				</view>
				<view class="flex flex-ai-c">
					<view class="detail mr-10" @click="handelDetail">
						<text class="mr-5">明细</text>
						<u-icon :name="inits.isMore ? 'arrow-down' : 'arrow-up'" size="20rpx" />
					</view>
					<view class="btn" @click="submitOrder">提交订单</view>
				</view>
			</view>
		</view>
	</view>
	<u-select @confirm="confirmRoom" v-model="inits.setRoom" :list="inits.roomColumns"></u-select>
	<u-select @confirm="confirmDate" v-model="inits.setDate" :list="inits.dateColumns"></u-select>
	<u-modal v-model="inits.mask" mask-close-able :show-confirm-button="false" :show-title="false">
		<view style="padding: 20rpx">
			<rich-text user-select :selectable="true" :nodes="inits.info.check_cance_policy"></rich-text>
		</view>
	</u-modal>

	<u-select @confirm="confirmPeople" v-model="inits.setNum" :list="inits.peopleNum"></u-select>
	<loginPop :show="inits.loginPopShow" @close="inits.loginPopShow = false" />
</template>

<script setup lang="ts">
	import { reactive, computed, watch } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	import user from '../../../api/user.js';
	import hotel from '../../../api/hotel.js';
	import loginPop from '@/components/loginPop.vue';
	import { calendarData, roomColumns, dateColumns, peopleNum } from './arrJsons.js';
	const store = useStore();
	const selectValue = computed(() => store.state.selectValues)
	const inits = reactive({
		mask: false,
		loginPopShow: false,
		info: {
			hotel_id: null,
			room_id: null,
			temp_price_id: '',
			total_price: null,
			check_cance_policy: '',
			room_money_text: '',
			breakfast_money_text: '',
			caregiver_money_text: '',
			other_money_text: '',
			reserve_p_money_text: '',
			r_name: '',
			min_day: 1,
			package: { room_money: 0, caregiver_money: 0, breakfast_money: 0, other_money: 0, price_title: 0, reserve_p_money: 0, pay_way: '' }
		},
		isMore: false,
		title: '',
		setRoom: false,
		setDate: false,
		total_price: 0,
		setNum: false,
		calendarData: calendarData,
		roomColumns: roomColumns,
		dateColumns: dateColumns,
		peopleNum: peopleNum()
	});
	const formData = reactive({
		reserve_type: 0,
		reserve_name: '',
		reserve_phone: '',
		remark: '',
		reserve_room_num: selectValue.value.reserve_room_num,
		arrival_time: inits.dateColumns[0].label,
		reserve_p_num: selectValue.value.reserve_p_num //人数
	});
	const totlaPrice = computed(() => (v : any) => {
		let total_price : any = 0;
		// let reserve_p_money = formData.reserve_p_num <= formData.reserve_room_num ? 0 : Number((formData.reserve_p_num - formData.reserve_room_num) * v.reserve_p_money)
		let reserve_p_money = Number(formData.reserve_p_num * v.reserve_p_money)
		total_price = (Number(inits.info.total_price) + Number(v.caregiver_money) + Number(v.breakfast_money) + Number(v.other_money)) * inits.calendarData.diff
		total_price = formatAmount((total_price * formData.reserve_room_num)  + (reserve_p_money * inits.calendarData.diff), '');
		inits.total_price = total_price;
		return total_price;
	});

	const removeCommasAndParseToInt = (amountStr) => {
		// 去除金额字符串中的逗号
		let cleanAmountStr = amountStr.replace(/,/g, '');

		// 将处理后的字符串转换为整数类型
		let amountInt = Number(cleanAmountStr);

		return amountInt;
	};
	const formatAmount = (amount : number, currencySymbol : string, decimalPlaces = 2) => {
		return (
			amount
				.toLocaleString('en-US', {
					style: 'decimal',
					minimumFractionDigits: decimalPlaces,
					maximumFractionDigits: decimalPlaces
				})
				.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + currencySymbol
		);
	};
	const handelDetail = () => {
		inits.isMore = !inits.isMore;
	};
	const getPhoneNumber = async (e : any) => {
		// 实际开发中接入微信获取手机号逻辑
		if (!e.detail.code) {
			return;
		}
		const res = await user.getPhoneNumber({
			code: e.detail.code
		});
		formData.reserve_phone = res.data.phoneNumber;
	};
	const confirmRoom = (e) => {
		formData.reserve_room_num = e[0].value;
		store.commit('SET_SELECT', {
			key: 'reserve_room_num',
			value: e[0].value
		})
	};
	const confirmPeople = (e) => {
		formData.reserve_p_num = e[0].value;
		store.commit('SET_SELECT', {
			key: 'reserve_p_num',
			value: e[0].value
		})
	}
	const confirmDate = (e) => {
		formData.arrival_time = e[0].label;
	};
	const jump = (url : string) => {
		uni.navigateTo({
			url: url
		});
	};
	const submitOrder = async () => {
		if (!uni.getStorageSync('token'))
			return showMsg('请登录', () => {
				inits.loginPopShow = true;
			});
		// 提交订单逻辑
		if (!formData.reserve_name || !formData.reserve_phone) return showMsg('请填写姓名或联系方式');
		const res = await hotel.roomReserveCorder({
			...formData,
			hotel_id: inits.info.hotel_id,
			room_id: inits.info.room_id,
			check_in_time: inits.calendarData.start.date,
			leave_time: inits.calendarData.end.date,
			temp_price_id: inits.info.temp_price_id,
			total_price: removeCommasAndParseToInt(inits.total_price),
			arrival_time: `${inits.calendarData.start.date} ${inits.dateColumns[0].label}`,
			reserve_p_num: formData.reserve_p_num + formData.reserve_room_num
		});
		if (res.code === 2001) {
			showMsg(res.msg);
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/hotel/orderList'
				});
			}, 1000);
		}
		if (res.code !== 200) return
		if (inits.info.package.pay_way == 'offline') {
			showMsg('预定成功');
			setTimeout(() => {
				uni.redirectTo({
					url: '/pages/hotel/orderList'
				});
			}, 1000)

			return
		}
		if (res.code === 200) {
			const res2 = await hotel.pay({
				order_id: res.data.order_id
			});
			if (res2.code === 200) {
				uni.requestOrderPayment({
					...res2.data.payRes,
					success() {
						showMsg('支付成功');
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/hotel/orderList'
							});
						}, 1000)
					},
					fail(err2) {
						if (err2.errMsg === 'requestPayment:fail cancel') {
							showMsg('您已取消支付');
						} else {
							showMsg('支付失败');
						}
					}
				});
			}
		} else if (res.code === 401) {
			inits.loginPopShow = true;
		}
	};
	const showMsg = (title : string, success ?: AnyFunction) => {
		uni.showToast({
			title: title,
			icon: 'none',
			success: success
		});
	};
	onShow(() => {
		if (store.state.calendarData) {
			inits.calendarData = store.state.calendarData
		}
	});
	onLoad((op) => {
		let info = JSON.parse(op.details);
		inits.title = info.h_name;
		inits.info = info;
		uni.$once('check_cance_policy', (text : string) => {
			inits.info.check_cance_policy = text;
		});
	});
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.tag-active::after {
		content: '';
		position: absolute;
		bottom: 0;
		right: -50rpx;
		height: 108rpx;
		width: 50rpx;
		z-index: 2;
		background-color: #fff !important;
		clip-path: path('M 0,0 C 25,0 8 50 30,100 L 0,50 Z');
	}

	.tag-active-2::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: -50rpx;
		right: 0;
		height: 108rpx;
		width: 50rpx;
		z-index: 3;
		background-color: #fff !important;
		clip-path: path('M 0,0 C 25,0 8 50 30,100 L 0,50 Z');
		transform: rotateY(180deg);
	}

	.container {
		padding-bottom: 100px;
		padding: 0 18rpx;

		.tag-active-2 {
			background: #fff !important;
		}

		.tag-active {
			background: #fff !important;
		}

		.tag {
			height: 108rpx;
			margin-top: 21rpx;

			view {
				position: relative;
				text-align: center;
				line-height: 108rpx;
				background: #f7f7f7;
				width: calc(50% - 50rpx);
			}
		}

		.card {
			padding: 0 30rpx;
			height: 90rpx;
			background: #fff;
			font-size: 28rpx;
			color: #666666;

			.card-title {
				color: #999999;
				width: 30%;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

		.footer-modal {
			position: absolute;
			top: 0;
			background: #fff;
			width: 100%;
			padding: 0 30rpx 56rpx 30rpx;
			z-index: -1;
			transition: all 0.2s;
		}

		.modal-up {
			transform: translateY(-390rpx);
		}

		.btn {
			width: 242rpx;
			height: 96rpx;
			background: #009943;
			border-radius: 12rpx;
			color: #fff;
			font-size: 30rpx;
			line-height: 96rpx;
			text-align: center;
		}

		.price {
			flex: 1;
			padding: 10px 15px;
			background: #fff;

			.amount {
				color: #ff4444;
				margin: 0 8rpx;
			}

			.detail {
				font-size: 22rpx;
			}
		}
	}

	:deep(.u-input) {
		border: none !important;
	}

	:deep(.uni-input-placeholder) {
		color: #999999 !important;
	}

	button {
		font-size: 24rpx;
		font-weight: 400;
		color: #000000 !important;
		padding: 0 17rpx;
		margin-right: 8rpx;
		background: #ebeae6;
		height: 50rpx;
		line-height: 50rpx;
	}

	// 边框样式
	button::after {
		border: 0;
	}
</style>